import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { List, message, Modal, Button } from 'antd';
import SeetingModal from './seetingModal';
import Authorized from '@/utils/Authorized';
import editImg from '../../../assets/edit-pwd.png';

@connect(({ personalset, loading }) => ({
  securityList: personalset.securityList,
  loading: loading.effects['personalset/updatePwd'],
}))
@Form.create()
class SecurityView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      tipModalVisible: false,
      firstLoginFlag: '2',
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'personalset/securityDetail', // 回显
      payload: {},
    });
    const firstLoginFlag = window.sessionStorage.getItem('firstLoginFlag') || '2';
    this.setState({ firstLoginFlag, tipModalVisible: firstLoginFlag === '1' });
  }

  // 修改
  update = () => {
    this.setState({ tipModalVisible: false, modalVisible: true });
  };

  // 确定
  updateOk = values => {
    const { dispatch } = this.props;
    dispatch({
      type: 'personalset/updatePwd',
      payload: {
        ...values,
      },
      callback: response => {
        if (response.success) {
          // message.success(response.message || '修改成功！');
          this.setState({ modalVisible: false, tipModalVisible: false });
          window.sessionStorage.removeItem('firstLoginFlag');
          this.info();
        } else {
          message.error(response.message || '修改失败！');
        }
      },
    });
  };

  // 取消
  cancel = flag => {
    this.setState({
      modalVisible: flag,
    });
  };

  info = () => {
    const { dispatch } = this.props;
    Modal.success({
      title: <div style={{ color: '#262626', fontWeight: 800 }}>修改成功</div>,
      content: <div style={{ color: '#595959' }}>请重新登录</div>,
      okText: '确定',
      onOk() {
        dispatch({
          type: 'login/logout',
        });
      },
    });
  };

  render() {
    const { securityList, loading } = this.props;
    const { modalVisible, tipModalVisible, firstLoginFlag } = this.state;
    return (
      <Fragment>
        <List
          itemLayout="horizontal"
          dataSource={[securityList]}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta
                style={{ width: '90%', flex: 'none' }}
                title="账户密码"
                description={item.userName}
              />
              <List.Item.Meta
                title=""
                description={
                  <Authorized authority="business:safetyInformation:restUserPwd" noMatch={null}>
                    <a onClick={this.update}>修改</a>
                  </Authorized>
                }
              />
            </List.Item>
          )}
        />
        <SeetingModal
          modalVisible={modalVisible}
          onCancel={() => this.cancel(false)}
          onOk={this.updateOk}
          firstLoginFlag={firstLoginFlag}
          loading={loading}
        />
        <Modal
          visible={tipModalVisible}
          closable={false}
          maskClosable={false}
          footer={null}
          keyboard={false}
        >
          <div style={{ marginTop: 14, marginBottom: 24, textAlign: 'center' }}>
            <img src={editImg} alt="修改密码" width="72px" height="72px" />
            <p style={{ marginTop: 30, fontWeight: 'bolder', fontSize: '18px' }}>
              登陆成功，请修改默认密码
            </p>
            <p style={{ marginBottom: 40, fontSize: '16px' }}>
              为了您的账户安全，请前往修改默认密码
            </p>
            <Button type="primary" onClick={this.update}>
              修改
            </Button>
          </div>
        </Modal>
      </Fragment>
    );
  }
}

export default SecurityView;
